<template>
  <div class="app-container calendar-list-container" v-loading="loading" >
    <el-form :model="q" ref="q" label-width="100px" class="el-form filter-container">
      <el-row>
        <el-col :span="8">
          <el-form-item label="起始日期" prop="startDate">
            <el-date-picker v-model="q.startDate" type="date" placeholder="起始日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker v-model="q.endDate" type="date" placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="cx-btnbox">
          <el-button round class="r" type="primary" @click="resrtFrom ">重置</el-button>
          <el-button round class="r" type="primary" @click="getList">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-button v-if="!isAdmin" round icon="el-icon-plus" type="primary" @click="dialogVisible = true;postForm.amount = 0">提现</el-button>
    <el-table :data="list" border fit highlight-current-row style="width: 100%" class="body-w">
      <el-table-column label="用户" prop="userName" width="150" >
        <template slot-scope="scope" >
          {{ `${scope.row.userName}【${scope.row.name}】` }}
        </template>
      </el-table-column>
      <el-table-column label="申请时间" prop="creationTime" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.creationTime | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请金额" prop="amount"></el-table-column>
      <el-table-column label="状态" prop="withdrawState" align="center">
        <template slot-scope="scope" >
          <el-tag :type="['info','','success','danger'][scope.row.withdrawState]" >{{ ['待审核','待转账','已完成','未通过'][scope.row.withdrawState] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="开户银行" prop="bank"></el-table-column>
      <el-table-column label="银行卡号" prop="bankCardNumber" ></el-table-column>
      <el-table-column label="审核时间" prop="auditTime" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.auditTime | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column label="到账时间" prop="paymentTime" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.paymentTime | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220px" v-if="isAdmin" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.withdrawState === 0" round type="primary" @click="handleAuditing(scope.row)" size="small" >审核</el-button>
          <el-button v-if="scope.row.withdrawState === 0" round type="danger" @click="handleNotThrough(scope.row)" size="small">回退</el-button>
          <el-button v-if="scope.row.withdrawState === 1" round type="success" @click="handleComplete(scope.row)" size="small">完成转账</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" style="margin-right:20px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="q.startPage" :page-sizes="[10,20,30, 50]" :page-size="q.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="提现" :visible.sync="dialogVisible">
      <el-form :model="postForm" :rules="rules" ref="postForm" label-width="100px" >
        <el-form-item label="提现金额" prop="amount">
          <el-input v-model.number="postForm.amount"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button round type="primary" @click="handleSubmit">确认提现</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { GetWithdrawCashPageList, Create, Auditing, NotThrough, Complete } from '@/api/withdrawCash'

export default {
  name: 'withdrawCash',
  data() {
    return {
      list: [],
      total: 0,
      dialogVisible: false,
      loading: false,
      q: {
        sorting: '',
        startPage: 1,
        pageCount: 30,
        startDate: '',
        endDate: ''
      },
      postForm: {
        amount: 0
      },
      rules: {
        amount: [
          { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    isAdmin() {
      return this.roles.includes('ADMIN')
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resrtFrom() {
      this.$refs['q'].resetFields()
    },
    getList() {
      var _this = this
      _this.loading = true
      GetWithdrawCashPageList(_this.q).then(result => {
        _this.list = result.data.items
        _this.total = result.data.totalCount
        _this.loading = false
      })
    },
    handleSizeChange(val) {
      this.q.pageCount = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.q.startPage = val
      this.getList()
    },
    handleSubmit() {
      var _this = this
      _this.loading = true
      Create(_this.postForm).then(result => {
        _this.dialogVisible = false
        _this.$message.success('提交成功')
        _this.getList()
      })
    },
    handleAuditing(row) {
      var _this = this
      _this.loading = true
      Auditing({ id: row.id }).then(result => {
        _this.loading = false
        _this.$message.success('操作完成')
        row.withdrawState = 1
      })
    },
    handleNotThrough(row) {
      var _this = this
      _this.loading = true
      NotThrough({ id: row.id }).then(result => {
        _this.loading = false
        _this.$message.success('操作完成')
        row.withdrawState = 3
      })
    },
    handleComplete(row) {
      var _this = this
      _this.loading = true
      Complete({ id: row.id }).then(result => {
        _this.loading = false
        _this.$message.success('操作完成')
        row.withdrawState = 2
      })
    }
  }
}
</script>

